JavaScriptin Pipeline-operaattorin mestarointi osittaisen funktion soveltamisen avulla

Jatkuvasti kehittyvässä JavaScript-kehityksen maisemassa syntyy uusia ominaisuuksia ja malleja, jotka voivat merkittävästi parantaa koodin luettavuutta, ylläpidettävyyttä ja tehokkuutta. Yksi tällainen tehokas yhdistelmä on JavaScriptin pipeline-operaattori, erityisesti kun sitä hyödynnetään osittaisen funktion soveltamisen kanssa. Tämän blogikirjoituksen tavoitteena on demystifioida nämä käsitteet ja tarjota kattava opas kehittäjille ympäri maailmaa, riippumatta heidän aiemmasta kokemuksestaan funktionaalisten ohjelmointiparadigmojen parissa.

JavaScriptin Pipeline-operaattorin ymmärtäminen

Pipeline-operaattori, jota usein edustaa putkisymboli | tai joskus |>, on ehdotettu ECMAScript-ominaisuus, joka on suunniteltu virtaviivaistamaan funktion sarjan soveltamista arvoon. Perinteisesti funktioiden ketjuttaminen JavaScriptissä voi joskus johtaa syvästi sisäkkäisiin kutsuihin tai vaatia välimuuttujia, jotka voivat peittää aiotun datavirran.

Ongelma: Liiallinen funktioiden ketjuttaminen

Harkitse tilannetta, jossa sinun on suoritettava sarja muunnoksia datalle. Ilman pipeline-operaattoria voisit kirjoittaa jotain tällaista:

            
const processData = (data) => {
  const step1 = addPrefix(data, 'processed_');
  const step2 = toUpperCase(step1);
  const step3 = addSuffix(step2, '_final');
  return step3;
};

// Tai käyttämällä ketjuttamista:
const processDataChained = (data) => addSuffix(toUpperCase(addPrefix(data, 'processed_')), '_final');

            

              
                Copy
              
            
          

Vaikka ketjutettu versio on tiiviimpi, se luetaan sisältä ulospäin. addPrefix-funktiota sovelletaan ensin, sitten sen tulosta välitetään toUpperCase-funktiolle, ja lopuksi sen tulos välitetään addSuffix-funktiolle. Tästä voi tulla vaikeaa seurata, kun funktioiden määrä kasvaa.

Ratkaisu: Pipeline-operaattori

Pipeline-operaattorin tavoitteena on ratkaista tämä mahdollistamalla funktioiden soveltaminen peräkkäin vasemmalta oikealle, mikä tekee datavirrasta selkeän ja intuitiivisen. Jos pipeline-operaattori |> olisi natiivi JavaScript-ominaisuus, sama toiminto voitaisiin ilmaista seuraavasti:

            
const processDataPiped = (data) => data 
  |> addPrefix('processed_') 
  |> toUpperCase 
  |> addSuffix('_final');

            

              
                Copy
              
            
          

Tämä luetaan luonnollisesti: ota data, sovella sitten siihen addPrefix('processed_'), sovella sitten tulokseen toUpperCase, ja lopuksi sovella siihen addSuffix('_final'). Data virtaa operaatioiden läpi selkeässä, lineaarisessa muodossa.

Nykyinen tila ja vaihtoehdot

On tärkeää huomata, että pipeline-operaattori on edelleen vaiheen 1 ehdotus ECMAScriptille. Vaikka se lupaa paljon, se ei ole vielä standardi JavaScript-ominaisuus. Tämä ei kuitenkaan tarkoita, ettet voisi hyötyä sen käsitteellisestä voimasta jo tänään. Voimme simuloida sen toimintaa erilaisilla tekniikoilla, joista tyylikkäin sisältää osittaisen funktion soveltamisen.

Mikä on osittainen funktion soveltaminen?

Osittainen funktion soveltaminen on tekniikka funktionaalisessa ohjelmoinnissa, jossa voit korjata joitain funktion argumentteja ja tuottaa uuden funktion, joka odottaa loput argumentit. Tämä eroaa curryingista, vaikkakin liittyy siihen. Currying muuntaa funktion, joka ottaa useita argumentteja, sarjaksi funktioita, joista kukin ottaa yhden argumentin. Osittainen soveltaminen korjaa argumentteja ilman, että funktiota tarvitsee välttämättä pilkkoa yhden argumentin funktioiksi.

Yksinkertainen esimerkki

Kuvitellaan funktio, joka lisää kaksi lukua:

            
const add = (a, b) => a + b;

console.log(add(5, 3)); // Tuloste: 8

            

              
                Copy
              
            
          

Nyt luodaan osittain sovellettu funktio, joka aina lisää 5 annettuun lukuun:

            
const addFive = (b) => add(5, b);

console.log(addFive(3)); // Tuloste: 8
console.log(addFive(10)); // Tuloste: 15

            

              
                Copy
              
            
          

Tässä addFive on uusi funktio, joka on johdettu add-funktiosta korjaamalla ensimmäinen argumentti (a) 5:ksi. Se vaatii nyt vain toisen argumentin (b).

Osittaisen sovelluksen toteuttaminen JavaScriptissä

JavaScriptin sisäänrakennetut metodit, kuten bind ja rest/spread-syntaksi, tarjoavat tapoja toteuttaa osittainen soveltaminen.

bind()-funktion käyttäminen

bind()-metodi luo uuden funktion, joka kutsuttaessa asettaa sen this-avainsanan annettuun arvoon, ja sarja annettuja argumentteja edeltää kaikkia uuden funktion kutsussa annettuja argumentteja.

            
const multiply = (x, y) => x * y;

// Osittain sovelletaan ensimmäinen argumentti (x) arvoon 10
const multiplyByTen = multiply.bind(null, 10);

console.log(multiplyByTen(5)); // Tuloste: 50
console.log(multiplyByTen(7)); // Tuloste: 70

            

              
                Copy
              
            
          

Tässä esimerkissä multiply.bind(null, 10) luo uuden funktion, jossa ensimmäinen argumentti (x) on aina 10. null välitetään bind-funktion ensimmäisenä argumenttina, koska emme välitä this-kontekstista tässä tapauksessa.

Nuolifunktioiden ja rest/spread-syntaksin käyttäminen

Modernimpi ja usein luettavampi lähestymistapa on käyttää nuolifunktioita yhdistettynä rest- ja spread-syntaksiin.

            
const divide = (numerator, denominator) => numerator / denominator;

// Osittain sovelletaan nimittäjä
const divideByTwo = (numerator) => divide(numerator, 2);

console.log(divideByTwo(10)); // Tuloste: 5
console.log(divideByTwo(20)); // Tuloste: 10

// Osittain sovelletaan osoittajaa
const divideTwoBy = (denominator) => divide(2, denominator);

console.log(divideTwoBy(4)); // Tuloste: 0.5
console.log(divideTwoBy(1)); // Tuloste: 2

            

              
                Copy
              
            
          

Tämä lähestymistapa on hyvin selkeä ja toimii hyvin funktioilla, joissa on pieni, kiinteä määrä argumentteja. Monilla argumenteilla varustetuille funktioille vankempi apufunktio voi olla hyödyllinen.

Osittaisen soveltamisen edut

• Koodin uudelleenkäytettävyys: Luo erikoistuneita versioita yleiskäyttöisistä funktioista.
• Luettavuus: Tekee monimutkaisista operaatioista helpommin ymmärrettäviä pilkkomalla ne osiin.
• Modulaarisuus: Funktiot ovat paremmin yhdisteltävissä ja niitä on helpompi käsitellä erikseen.
• DRY-periaate: Vältetään samojen argumenttien toistaminen useissa funktion kutsuissa.

Pipeline-operaattorin simulointi osittaisella sovelluksella

Tuodaan nyt nämä kaksi käsitettä yhteen. Voimme simuloida pipeline-operaattoria luomalla apufunktion, joka ottaa arvon ja funktion sarjan sovellettavaksi niihin peräkkäin. Ratkaisevasti funktioidemme on oltava rakenteeltaan sellaisia, että ne hyväksyvät välituloksen ensimmäisenä argumenttinaan, missä osittainen soveltaminen loistaa.

pipe-apufunktio

Määritellään `pipe`-funktio, joka toteuttaa tämän:

            
const pipe = (initialValue, fns) => {
  return fns.reduce((acc, fn) => fn(acc), initialValue);
};

            

              
                Copy
              
            
          

Tämä `pipe`-funktio ottaa `initialValue`:n ja funktion taulukon (`fns`). Se käyttää `reduce`-funktiota iteratiivisesti soveltamaan kutakin funktiota (`fn`) akkumulaattoriin (`acc`), aloittaen `initialValue`:sta. Jotta tämä toimisi saumattomasti, jokaisen `fns`-taulukon funktion on oltava valmis hyväksymään edellisen funktion tulos ensimmäisenä argumenttinaan.

Funktioiden valmistelu putkitusta varten

Tässä osittaisesta soveltamisesta tulee korvaamaton. Jos alkuperäiset funktiomme eivät luonnollisesti hyväksy välitulosta ensimmäisenä argumenttinaan, meidän on mukautettava niitä. Tarkastellaan alkuperäistä `addPrefix`-esimerkkiämme:

            
const addPrefix = (prefix, str) => `${prefix}${str}`;
const toUpperCase = (str) => str.toUpperCase();
const addSuffix = (str, suffix) => `${str}${suffix}`;

            

              
                Copy
              
            
          

Jotta `pipe`-funktio toimisi, tarvitsemme funktioita, jotka ottavat merkkijonon ensin ja sitten muut argumentit. Voimme toteuttaa tämän osittaisella soveltamisella:

            
// Osittain sovelletaan argumentteja, jotta ne sopivat putkioiden odotuksiin
const addProcessedPrefix = (str) => addPrefix('processed_', str);
const addFinalSuffix = (str) => addSuffix(str, '_final');

// Käytetään nyt pipe-apufunktiota
const data = "hello";
const processedData = pipe(data, [
  addProcessedPrefix,
  toUpperCase,
  addFinalSuffix
]);

console.log(processedData); // Tuloste: PROCESSED_HELLO_FINAL

            

              
                Copy
              
            
          

Tämä toimii kauniisti. `addProcessedPrefix`-funktio luodaan korjaamalla `addPrefix`-funktion `prefix`-argumentti. Samoin `addFinalSuffix` korjaa `addSuffix`-funktion `suffix`-argumentin. `toUpperCase`-funktio sopii jo valmiiksi kuvioon, koska se ottaa vain yhden argumentin (merkkijonon).

Elegantimpi pipe funktioiden tehtaiden avulla

Voimme tehdä `pipe`-funktiostamme entistä paremmin yhteensopivan ehdotetun pipeline-operaattorin syntaksin kanssa luomalla funktion, joka palauttaa itse putkitetun operaation. Tämä vaatii hieman ajattelutavan muutosta, jossa sen sijaan, että välitetään alkuperäinen arvo suoraan `pipe`-funktioon, se välitetään myöhemmin.

Luodaan `pipeline`-funktio, joka ottaa funktion sarjan ja palauttaa uuden funktion, joka on valmis hyväksymään alkuperäisen arvon:

            
const pipeline = (...fns) => {
  return (initialValue) => {
    return fns.reduce((acc, fn) => fn(acc), initialValue);
  };
};

// Valmistellaan nyt funktiot (sama kuin ennen)
const addPrefix = (prefix, str) => `${prefix}${str}`;
const toUpperCase = (str) => str.toUpperCase();
const addSuffix = (str, suffix) => `${str}${suffix}`;

const addProcessedPrefix = (str) => addPrefix('processed_', str);
const addFinalSuffix = (str) => addSuffix(str, '_final');

// Luodaan putkitettu operaatiofunktio
const processPipeline = pipeline(
  addProcessedPrefix,
  toUpperCase,
  addFinalSuffix
);

// Nyt sovelletaan sitä dataan
const data1 = "world";
console.log(processPipeline(data1)); // Tuloste: PROCESSED_WORLD_FINAL

const data2 = "javascript";
console.log(processPipeline(data2)); // Tuloste: PROCESSED_JAVASCRIPT_FINAL

            

              
                Copy
              
            
          

Tämä `pipeline`-funktio luo uudelleenkäytettävän operaation. Määrittelemme muunnosten sarjan kerran, ja voimme sitten soveltaa tätä sarjaa mihin tahansa määrään syötearvoja.

bind-funktion käyttäminen funktioiden valmisteluun

Voimme myös käyttää `bind`-funktiota funktioiden valmisteluun, mikä voi olla erityisen hyödyllistä, jos työskentelet olemassa olevien koodikantojen tai kirjastojen kanssa, jotka eivät helposti tue curryingia tai argumenttien uudelleenjärjestelyä.

            
const multiply = (factor, number) => factor * number;
const square = (number) => number * number;
const addTen = (number) => number + 10;

// Valmistellaan funktiot käyttämällä bind-funktiota
const multiplyByFive = multiply.bind(null, 5);
// Huom: square- ja addTen-funktiot sopivat jo kuvioon.

const complicatedOperation = pipeline(
  multiplyByFive, // Ottaa luvun, palauttaa number * 5
  square,         // Ottaa tuloksen, palauttaa (number * 5)^2
  addTen          // Ottaa sen tuloksen, palauttaa (number * 5)^2 + 10
);

console.log(complicatedOperation(2)); // (2*5)^2 + 10 = 100 + 10 = 110
console.log(complicatedOperation(3)); // (3*5)^2 + 10 = 225 + 10 = 235

            

              
                Copy
              
            
          

Globaali sovellus ja parhaat käytännöt

Pipeline-operaatioiden ja osittaisen funktion soveltamisen käsitteet eivät ole sidottuja mihinkään tiettyyn alueeseen tai kulttuuriin. Ne ovat tietojenkäsittelytieteen ja matematiikan perustavanlaatuisia periaatteita, mikä tekee niistä universaalisti sovellettavia kehittäjille ympäri maailmaa.

Koodin kansainvälistäminen

Työskennellessäsi globaalissa tiimissä tai kehittäessäsi ohjelmistoja kansainväliselle yleisölle, koodin selkeys ja ennakoitavuus ovat ensiarvoisen tärkeitä. Pipeline-operaattorin intuitiivinen vasemmalta oikealle -virtaus auttaa merkittävästi monimutkaisten datamuunnosten ymmärtämisessä, mikä on korvaamatonta, kun tiimin jäsenillä voi olla erilaiset kielelliset taustat tai vaihtelevat tuntemukset JavaScript-idioomeista.

Esimerkki: Kansainvälinen päivämäärämuotoilu

Harkitaan käytännön esimerkkiä: päivämäärien muotoilu globaalille yleisölle. Päivämääriä voidaan esittää monissa muodoissa maailmanlaajuisesti (esim. MM/PP/VVVV, PP/MM/VVVV, VVVV-PP-KK). Putken käyttäminen voi auttaa abstrahoimaan tämän monimutkaisuuden.

Oletetaan, että meillä on funktio, joka ottaa Date-objektin ja palauttaa muotoillun merkkijonon. Haluaisimme ehkä soveltaa sarjaa muunnoksia: muuntaa UTC:ksi, sitten muotoilla se paikallisesti tunnistettavalla tavalla.

            
// Oletetaan, että nämä on määritelty muualla ja ne hoitavat kansainvälistämiskompleksisuudet
const toUTCString = (date) => date.toUTCString();
const formatForLocale = (dateString, locale = 'en-US', options = { year: 'numeric', month: 'long', day: 'numeric' }) => {
  // Todellisessa sovelluksessa tämä käyttäisi Intl.DateTimeFormat
  // Yksinkertaisuuden vuoksi havainnollistetaan vain putkea
  const date = new Date(dateString);
  return date.toLocaleDateString(locale, options);
};

const prepareForDisplay = pipeline(
  toUTCString,                                        // Vaihe 1: Muunna UTC-merkkijonoksi
  (utcString) => new Date(utcString),                 // Vaihe 2: Jäsennetään takaisin Date-objektiksi Intl-objektia varten
  (date) => date.toLocaleDateString('fr-FR', { year: 'numeric', month: 'short', day: '2-digit' }) // Vaihe 3: Muotoillaan ranskalaista paikallista varten
);

const today = new Date();
console.log(prepareForDisplay(today)); // Esimerkkituloste (riippuu nykyisestä päivämäärästä): "15 mars 2023"

// Eri paikallisen muotoilua varten:
const prepareForDisplayUS = pipeline(
  toUTCString,
  (utcString) => new Date(utcString),
  (date) => date.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })
);

console.log(prepareForDisplayUS(today)); // Esimerkkituloste: "March 15, 2023"

            

              
                Copy
              
            
          

Tässä esimerkissä `pipeline` luo uudelleenkäytettäviä päivämäärän muotoilufunktioita. Jokainen putken vaihe on erillinen muunnos, mikä tekee koko prosessista läpinäkyvän. Osittaista soveltamista käytetään implisiittisesti, kun määrittelemme `toLocaleDateString`-kutsun putkessa, korjaten paikallisen ja asetukset.

Suorituskykyhuomiot

Vaikka pipeline-operaattorin ja osittaisen soveltamisen selkeys ja eleganssi ovat merkittäviä etuja, on viisasta ottaa huomioon suorituskyky. JavaScriptissä funktioilla, kuten `reduce` ja uusien funktioiden luomisella `bind`- tai nuolifunktioiden kautta, on pieni yläraja. Erittäin suorituskykykriittisissä silmukoissa tai miljoonia kertoja suoritettavissa operaatioissa perinteiset imperatiiviset lähestymistavat voivat olla marginaalisesti nopeampia.

Suurimmassa osassa sovelluksia kehittäjätyön tehokkuus, koodin ylläpidettävyys ja virheiden väheneminen kuitenkin ylittävät kauas mahdolliset mitättömät suorituskykyerot. Ennenaikainen optimointi on kaiken pahan juuri, ja tässä tapauksessa luettavuuden parannukset ovat huomattavia.

Kirjastot ja kehykset

Monet funktionaaliset ohjelmointikirjastot JavaScriptissä, kuten Lodash/FP, Ramda ja muut, tarjoavat vankkoja toteutuksia `pipe`- ja `partial` (tai curry) -funktioille. Jos käytät jo tällaista kirjastoa, saatat löytää nämä apuohjelmat helposti saatavilla.

Esimerkiksi Ramdaa käyttämällä:

            
const R = require('ramda');

const add = (a, b) => a + b;
const multiply = (a, b) => a * b;

// Currying on yleistä Ramdassa, mikä mahdollistaa osittaisen soveltamisen helposti
const addFive = R.curry(add)(5);
const multiplyByThree = R.curry(multiply)(3);

// Ramdan pipe odottaa funktioita, jotka ottavat yhden argumentin ja palauttavat tuloksen.
// Joten voimme käyttää currying-funktioitamme suoraan.
const operation = R.pipe(
  addFive,           // Ottaa luvun, palauttaa number + 5
  multiplyByThree    // Ottaa tuloksen, palauttaa (number + 5) * 3
);

console.log(operation(2)); // (2 + 5) * 3 = 7 * 3 = 21
console.log(operation(10)); // (10 + 5) * 3 = 15 * 3 = 45

            

              
                Copy
              
            
          

Vakiintuneiden kirjastojen käyttö voi tarjota optimoituja ja hyvin testattuja toteutuksia näille malleille.

Edistyneet mallit ja harkinnat

Perustoteutuksen `pipe` lisäksi voimme tutkia edistyneempiä malleja, jotka edelleen jäljittelevät natiivin pipeline-operaattorin potentiaalista käyttäytymistä.

Funktionaalinen päivitysmalli

Osittainen soveltaminen on avain funktionaalisten päivitysten toteuttamiseen, erityisesti käsiteltäessä monimutkaisia sisäkkäisiä data-rakenteita ilman mutaatiota. Kuvittele käyttäjäprofiilin päivittäminen:

            
const updateUser = (userId, updates) => (users) => {
  return users.map(user => {
    if (user.id === userId) {
      return { ...user, ...updates }; // Yhdistetään päivitykset käyttäjäobjektiin
    } else {
      return user;
    }
  });
};

// Valmistellaan päivitysfunktio osittaisella sovelluksella
const updateUserName = (newName) => ({ name: newName });
const updateUserEmail = (newEmail) => ({ email: newEmail });

// Määritetään putki käyttäjän päivittämiseksi
const processUserUpdate = (userId, updateFn) => {
  const updateObject = updateFn;
  return pipeline(
    updateUser(userId, updateObject)
    // Jos olisi enemmän peräkkäisiä päivityksiä, ne menisivät tähän
  );
};

const initialUsers = [
  { id: 1, name: 'Alice', email: 'alice@example.com' },
  { id: 2, name: 'Bob', email: 'bob@example.com' }
];

// Päivitetään Alicen nimi
const updatedUsersByName = processUserUpdate(1, updateUserName('Alicia'))(initialUsers);
console.log(updatedUsersByName);

// Päivitetään Bobin sähköposti
const updatedUsersByEmail = processUserUpdate(2, updateUserEmail('bob.updated@example.com'))(initialUsers);
console.log(updatedUsersByEmail);

// Peräkkäiset päivitykset samalle käyttäjälle
const updatedAlice = pipeline(
  updateUser(1, updateUserName('Alicia')),
  updateUser(1, updateUserEmail('alicia.new@example.com'))
)(initialUsers);
console.log(updatedAlice);

            

              
                Copy
              
            
          

Tässä `updateUser` on funktioiden tehdas. Se palauttaa funktion, joka suorittaa päivityksen. Soveltamalla osittain `userId` ja erityinen päivityslogiikka (`updateUserName`, `updateUserEmail`) luomme erittäin erikoistuneita päivitysfunktioita, jotka sopivat putkeen.

Point-free -tyylinen ohjelmointi

Pipeline-operaattorin ja osittaisen soveltamisen yhdistelmä johtaa usein point-free -tyyliseen ohjelmointiin, joka tunnetaan myös nimellä tacit programming. Tässä tyylissä kirjoitat funktioita koostamalla muita funktioita ja vältät eksplisiittisesti mainitsemasta käsiteltävää dataa ("pisteitä").

Tarkastellaan `pipeline`-esimerkkiämme:

            
const addPrefix = (prefix, str) => `${prefix}${str}`;
const toUpperCase = (str) => str.toUpperCase();
const addSuffix = (str, suffix) => `${str}${suffix}`;

const addProcessedPrefix = (str) => addPrefix('processed_', str);
const addFinalSuffix = (str) => addSuffix(str, '_final');

const processPipeline = pipeline(
  addProcessedPrefix,
  toUpperCase,
  addFinalSuffix
);

// Tässä 'processPipeline' on funktio, joka on määritelty mainitsematta
// eksplisiittisesti dataa, jota se operoi. Se on muiden funktioiden koostumus.

            

              
                Copy
              
            
          

Tämä voi tehdä koodista erittäin tiiviin, mutta voi myös olla vaikealukuisempaa niille, jotka eivät tunne funktionaalista ohjelmointia. Avain on löytää tasapaino, joka parantaa luettavuutta tiimillesi.

|> ` operaattori: Esikatselu